import hljs from "highlight.js";
import hljs from "highlight.js";
<template>
  <div class="root" :style="{height:this.$parent.fullHeight-110+'px'}">
    <div class="top">
      <div class="changeHeadPhoto">
        <img :src='headPhoto'>
      </div>
      <div class="changeName">
        <label for="ChatName">修改昵称</label>
        <input type="text" id="ChatName" placeholder="当前昵称：隔壁老王" v-model="chatName"/>
      </div>
    </div>
    <div id="chatList" ref="chatList" class="chatList" :style="{height:this.$parent.fullHeight-350+'px'}" @scroll="chatScroll()">
      <ul>
        <li v-for="chat in chatRecords">
          <el-avatar class="chatHeadPhoto" shape="square" :size="35" :src="chat.chatHeadPhoto"></el-avatar>
          <div class="chatMsg">
            <p class="chatName">{{chat.chatName}}</p>
            <div class="chatContent" v-html="chat.chatContent"></div>
            </div>
        </li>
      </ul>
    </div>
    <el-badge v-model="unread" :class="unread=== 0 ? 'unreadHide' : 'unread'">
      <button>未读</button>
    </el-badge>
    <div class="chatEditor">
      <div id="editor"></div>
      <button type="button" class="chatSend" @click="chatSend">发 送</button>
    </div>
  </div>
</template>

<script>
    import Editor from "wangeditor";

    export default {
      name: "Chat",
      data(){
        return{
          webSocket: null,
          headPhoto: '',
          chatName: '',
          chatRecords: null,
          unread: 12
          /*[
            {
              chatHeadPhoto: 'static/image/chatHead/head10.jpg',
              chatName: '大郎喝药',
              chatContent:'<p data-we-empty-p=\'\'>123123<img class=\'eleImg\' data-emoji=\'&#91;streamline-amazed-face--smiley-people--22x22.PNG&#93;\' src=\'static/image/expressionImg/streamline-amazed-face--smiley-people--22x22.PNG\' alt=\'&#91;&#91;streamline-amazed-face--smiley-people--22x22.PNG&#93;&#93;\'><img class=\'eleImg\' data-emoji=\'&#91;streamline-amusing-face--smiley-people--22x22.PNG&#93;\' src=\'static/image/expressionImg/streamline-amusing-face--smiley-people--22x22.PNG\' alt=\'&#91;&#91;streamline-amusing-face--smiley-people--22x22.PNG&#93;&#93;\'></p>'
            }
          ]*/,
        }
      },
      methods :{
        //发送信息
        chatSend(){
          let content = this.formattingParam(document.getElementsByClassName("w-e-text")[0].innerHTML);
          let jsonParam = '{"chatHeadPhoto":"'+this.headPhoto+'","chatName":"'+this.chatName+'","chatContent":"'+content+'"}';
          this.webSocket.send(jsonParam);
          document.getElementsByClassName("w-e-text")[0].innerHTML="";
        },

        //格式化聊天
        formattingParam(val) {
          val = val.replaceAll("{","&#123;");
          val = val.replaceAll("}","&#125;");
          val = val.replaceAll("\"","\'");
          val = val.replaceAll(":","&#58;");
          val = val.replaceAll("[","&#91;");
          val = val.replaceAll("]","&#93;");
          return val;
        },

        //随机获取头像
        randomHeadPhoto(){
          let index = Math.ceil(Math.random()*20);
          this.headPhoto = 'static/image/chatHead/head'+index+'.jpg'
        },

        //随机获取名称
        randomChatName(){
          let names = ["级~","盐焗小星球","捞起月亮的渔民","甜崽小洋","脑袋困掉了","花生了什么树","银河小铁骑","章鱼小肉丸","油炸小可爱","月亮供电不足","汽水味的小盆友","别摸我的婴儿肥","柠檬小丸子","邮一棵草莓","房东的猫","文艺网名","地主的狗","可可西里","齐齐哈尔","少女适俗韵","天亮说晚安","树摇风","醉梦几时","香蕉不娇","细雨挽轻裳","半字浅眉-","盛夏之末","记得微笑 ","人间失格 ","荒野的公寓","森浓有荒","云清雾淡","潇湘雨夜独听琴","海阔山遥","枝上绵蛮","锦瑟华年","青简半卷","又眠秋雨","赫本的猫","在等星星嗎","文艺网名","我和夏天来了","夜子","酒后略带风情","罐装冰块","海棠蚀","花店没开","星光褪色","葡萄味的吻","晚风吹行舟","温吞世俗","月亮降落点","杀手的诗","怎扰春意","收集一杯雾","平行宇宙","月亮列车","低谷有雾","宇宙预报员","何来浪漫","月亮以西","潜入宇宙","巴黎夜雨","六弦绿漪","紫荆私语","久夏青","橘柑橙柠桔柚","蔚蓝的心","如果有如果","野荷的香馥","九月茉莉","你我将岁月两清","喜爱弄人","令我空欢喜","眉目里","拉扯四季","犹如候鸟","高雅有内涵的微信名字","漫过岁月","她已醉","拥抱往事","你别皱眉","云纤","温柔年岁","短暂依赖","猫田喂山风","月亮邮递员","林间有新绿","朵烟熏的埖","穿着碎花裙的少女","回风舞雪","曼珠沙华","深海夜未眠","翻过的亲切","柚花离海","眉温如初","清风饮露","橘和柠","早茶月光","以云为纸","若隐若现","恰似旧人归","淋雨墨心","明目款款","独望风雨满楼","清风予我","长安花落尽","夜来南风起"]
          let index = Math.ceil(Math.random()*names.length);
          this.chatName = names[index]
        },

        //获取uuid
        getUUID() {
          return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            let r = Math.random() * 16 | 0,
              v = c === 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
          });
        },

        //webSocket
        webSocketInit(){
          let _this = this;
          let websocket = null;
          let uuid = this.getUUID();
          //判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址
          if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8081/websocket/"+uuid);
            this.webSocket = websocket;
          } else {
            _this.$message({
              showClose: true,
              message: '聊天服务器连接失败，刷新试试',
              center: true,
              type: 'error'
            });
          }

          //连接发生错误的回调方法
          websocket.onerror = function() {
            _this.$message({
              showClose: true,
              message: '聊天服务器连接失败，刷新试试',
              center: true,
              type: 'error'
            });
          };

          //连接成功建立的回调方法
          websocket.onopen = function() {
            _this.$message({
              showClose: true,
              message: '聊天服务器连接成功',
              center: true,
              type: 'success'
            });
          };

          //接收到消息的回调方法
          websocket.onmessage = function(event) {
            let chats = JSON.parse(event.data);
           _this.chatRecords.push(chats);
           _this.unread+=1;
          };

          //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
          window.onbeforeunload = function() {
            websocket.close();
          };
        },

        //下拉聊天记录
        chatScroll(){
          let _this = this;
          let a = _this.$refs.chatList.scrollHeight;  //内容高度
          let b = _this.$refs.chatList.clientHeight; //可视区
          let c = _this.$refs.chatList.scrollTop;  //距离顶部
          if (b+c >= a-10){
            _this.unread = 0;
          }if(b+c >= a-10) {
            _this.$message.warning('哦噢，到底了！！');
          }
        }
      },
      mounted() {

        //获取历史聊天记录
        this.$axios({
          method: 'post',
          url: 'http://localhost:8081/findChats'
        }).then((response) =>{
            this.chatRecords = response.data;
          }
        ).catch(()=>{
          this.$message({
            message: '聊天记录加载失败，刷新试试',
            type: 'error',
          })
        });

        //初始化一个头像
        this.randomHeadPhoto();

        //初始化一个昵称
        this.randomChatName();

        //初始化编辑框
        let editor = new Editor("#editor");
        editor.config.height = 180;
        editor.config.pasteText = true;
        // 取消粘贴过滤
        editor.config.pasteFilter = true;
        editor.config.zIndex = 10;
        editor.config.showFullScreen = false;  //关闭全屏
        editor.config.menus=[
          'foreColor', // 文字颜色
          'emoticon', // 表情
          '图片'
        ];
        // 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
        editor.config.emotions = [
          {
            // tab 的标题
            title: '大头表情',
            // type -> 'emoji' / 'image'
            type: 'image',
            // content -> 数组
            content: [
              {
                alt: '[streamline-alien--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-alien--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-amazed-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-amazed-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-amusing-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-amusing-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-anguished-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-anguished-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-anxious-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-anxious-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-astonished-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-astonished-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-beaming-face-with-smiling-eyes--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-beaming-face-with-smiling-eyes--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-cat-face-with-tears-of-joy--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-cat-face-with-tears-of-joy--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-cat-face-with-wry-smile--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-cat-face-with-wry-smile--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-clown-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-clown-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-confounded-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-confounded-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-confused-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-confused-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-cowboy-hat-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-cowboy-hat-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-crazy-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-crazy-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-crying-cat-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-crying-cat-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-crying-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-crying-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-determined-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-determined-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-disappointed-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-disappointed-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-dizzy-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-dizzy-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-downcast-face-with-sweat--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-downcast-face-with-sweat--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-drooling-face-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-drooling-face-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-drooling-face-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-drooling-face-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-exploding-head--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-exploding-head--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-expressionless-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-expressionless-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-blowing-a-kiss--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-blowing-a-kiss--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-savoring-food--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-savoring-food--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-screaming-in-fear--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-screaming-in-fear--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-vomiting--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-vomiting--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-with-head-bandage--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-with-head-bandage--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-with-medical-mask--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-with-medical-mask--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-with-monocle--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-with-monocle--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-with-raised-eyebrow--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-with-raised-eyebrow--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-with-rolling-eyes--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-with-rolling-eyes--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-with-steam-from-nose--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-with-steam-from-nose--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-with-symbols-on-mouth--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-with-symbols-on-mouth--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-with-tears-of-joy--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-with-tears-of-joy--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-with-thermometer--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-with-thermometer--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-with-tongue--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-with-tongue--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-face-without-mouth--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-face-without-mouth--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-fearful-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-fearful-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-flushed-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-flushed-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-frowning-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-frowning-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-ghost--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-ghost--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-grimacing-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-grimacing-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-grinning-cat-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-grinning-cat-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-grinning-cat-face-with-smiling-eyes--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-grinning-cat-face-with-smiling-eyes--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-grinning-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-grinning-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-grinning-face-with-smiling-eyes--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-grinning-face-with-smiling-eyes--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-grinning-face-with-sweat--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-grinning-face-with-sweat--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-grinning-squinting-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-grinning-squinting-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-hushed-face-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-hushed-face-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-hushed-face-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-hushed-face-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-kissing-cat-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-kissing-cat-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-kissing-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-kissing-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-kissing-face-with-closed-eyes--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-kissing-face-with-closed-eyes--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-kissing-face-with-smiling-eyes--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-kissing-face-with-smiling-eyes--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-loudly-crying-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-loudly-crying-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-lying-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-lying-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-money-mouth-face-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-money-mouth-face-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-money-mouth-face-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-money-mouth-face-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-nauseated-face-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-nauseated-face-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-nauseated-face-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-nauseated-face-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-nerd-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-nerd-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-neutral-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-neutral-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-pensive-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-pensive-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-persevering-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-persevering-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-pile-of-poo--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-pile-of-poo--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-pouting-cat-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-pouting-cat-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-pouting-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-pouting-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-relieved-face-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-relieved-face-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-relieved-face-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-relieved-face-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-rolling-on-the-floor-laughing-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-rolling-on-the-floor-laughing-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-rolling-on-the-floor-laughing-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-rolling-on-the-floor-laughing-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-sad-but-relieved-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-sad-but-relieved-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-shushing-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-shushing-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-sleeping-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-sleeping-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-sleepy-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-sleepy-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-slightly-smiling-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-slightly-smiling-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-smiling-cat-face-with-heart-eyes--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-smiling-cat-face-with-heart-eyes--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-smiling-face-with-halo--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-smiling-face-with-halo--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-smiling-face-with-heart-eyes--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-smiling-face-with-heart-eyes--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-smiling-face-with-horns--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-smiling-face-with-horns--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-smiling-face-with-smiling-eyes--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-smiling-face-with-smiling-eyes--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-smiling-face-with-sunglasses--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-smiling-face-with-sunglasses--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-smirking-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-smirking-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-sneezing-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-sneezing-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-squinting-face-with-tongue--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-squinting-face-with-tongue--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-star-struck-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-star-struck-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-star-struck-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-star-struck-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-thinking-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-thinking-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-tired-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-tired-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-unamused-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-unamused-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-upside-down-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-upside-down-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-weary-cat-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-weary-cat-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-weary-face-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-weary-face-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-weary-face-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-weary-face-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-winking-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-winking-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-winking-face-with-tongue--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-winking-face-with-tongue--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-worried-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-worried-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-zipper-mouth-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-zipper-mouth-face--smiley-people--22x22.PNG'
              }
            ]
          },
          {
            // tab 的标题
            title: '手势',
            // type -> 'emoji' / 'image'
            type: 'image',
            // content -> 数组
            content: [
              {
                alt: '[streamline-backhand-index-pointing-down-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-backhand-index-pointing-down-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-backhand-index-pointing-down-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-backhand-index-pointing-down-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-backhand-index-pointing-left-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-backhand-index-pointing-left-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-backhand-index-pointing-left-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-backhand-index-pointing-left-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-backhand-index-pointing-right-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-backhand-index-pointing-right-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-backhand-index-pointing-right-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-backhand-index-pointing-right-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-backhand-index-pointing-up-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-backhand-index-pointing-up-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-backhand-index-pointing-up-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-backhand-index-pointing-up-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-clapping-hands-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-clapping-hands-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-clapping-hands-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-clapping-hands-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-crossed-fingers-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-crossed-fingers-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-crossed-fingers-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-crossed-fingers-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-flexed-biceps-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-flexed-biceps-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-flexed-biceps-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-flexed-biceps-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-folded-hands-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-folded-hands-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-folded-hands-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-folded-hands-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-grinning-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-grinning-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-hand-with-fingers-splayed-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-hand-with-fingers-splayed-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-hand-with-fingers-splayed-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-hand-with-fingers-splayed-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-index-pointing-up-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-index-pointing-up-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-index-pointing-up-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-index-pointing-up-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-nail-polish-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-nail-polish-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-nail-polish-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-nail-polish-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-ok-hand-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-ok-hand-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-ok-hand-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-ok-hand-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-oncoming-fist-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-oncoming-fist-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-oncoming-fist-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-oncoming-fist-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-raised-fist-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-raised-fist-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-raised-fist-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-raised-fist-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-raised-hand-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-raised-hand-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-raised-hand-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-raised-hand-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-raising-hands-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-raising-hands-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-raising-hands-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-raising-hands-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-selfie-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-selfie-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-selfie-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-selfie-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-sign-of-the-horns-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-sign-of-the-horns-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-sign-of-the-horns-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-sign-of-the-horns-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-thumbs-down-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-thumbs-down-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-thumbs-down-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-thumbs-down-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-thumbs-up-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-thumbs-up-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-thumbs-up-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-thumbs-up-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-victory-hand-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-victory-hand-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-victory-hand-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-victory-hand-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-vulcan-salute-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-vulcan-salute-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-vulcan-salute-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-vulcan-salute-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-waving-hand-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-waving-hand-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-waving-hand-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-waving-hand-2--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-writing-hand-1--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-writing-hand-1--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-writing-hand-2--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-writing-hand-2--smiley-people--22x22.PNG'
              }
            ]
          },
          {
            // tab 的标题
            title: '旗帜',
            // type -> 'emoji' / 'image'
            type: 'image',
            // content -> 数组
            content: [
              {
                alt: '[streamline-australia--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-australia--flags--22x22.PNG'
              },
              {
                alt: '[streamline-brazil--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-brazil--flags--22x22.PNG'
              },
              {
                alt: '[streamline-canada--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-canada--flags--22x22.PNG'
              },
              {
                alt: '[streamline-china--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-china--flags--22x22.PNG'
              },
              {
                alt: '[streamline-crossed-flags--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-crossed-flags--flags--22x22.PNG'
              },
              {
                alt: '[streamline-egypt--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-egypt--flags--22x22.PNG'
              },
              {
                alt: '[streamline-france--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-france--flags--22x22.PNG'
              },
              {
                alt: '[streamline-germany--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-germany--flags--22x22.PNG'
              },
              {
                alt: '[streamline-greece--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-greece--flags--22x22.PNG'
              },
              {
                alt: '[streamline-grinning-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-grinning-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-india--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-india--flags--22x22.PNG'
              },
              {
                alt: '[streamline-iran--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-iran--flags--22x22.PNG'
              },
              {
                alt: '[streamline-iraq--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-iraq--flags--22x22.PNG'
              },
              {
                alt: '[streamline-italy--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-italy--flags--22x22.PNG'
              },
              {
                alt: '[streamline-japan--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-japan--flags--22x22.PNG'
              },
              {
                alt: '[streamline-malaysia--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-malaysia--flags--22x22.PNG'
              },
              {
                alt: '[streamline-mexico--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-mexico--flags--22x22.PNG'
              },
              {
                alt: '[streamline-nepal--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-nepal--flags--22x22.PNG'
              },
              {
                alt: '[streamline-north-korea--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-north-korea--flags--22x22.PNG'
              },
              {
                alt: '[streamline-pakistan--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-pakistan--flags--22x22.PNG'
              },
              {
                alt: '[streamline-portugal--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-portugal--flags--22x22.PNG'
              },
              {
                alt: '[streamline-russia--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-russia--flags--22x22.PNG'
              },
              {
                alt: '[streamline-singapore--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-singapore--flags--22x22.PNG'
              },
              {
                alt: '[streamline-south-africa--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-south-africa--flags--22x22.PNG'
              },
              {
                alt: '[streamline-south-korea--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-south-korea--flags--22x22.PNG'
              },
              {
                alt: '[streamline-spain--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-spain--flags--22x22.PNG'
              },
              {
                alt: '[streamline-switzerland--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-switzerland--flags--22x22.PNG'
              },
              {
                alt: '[streamline-syria--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-syria--flags--22x22.PNG'
              },
              {
                alt: '[streamline-thailand--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-thailand--flags--22x22.PNG'
              },
              {
                alt: '[streamline-turkey--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-turkey--flags--22x22.PNG'
              },
              {
                alt: '[streamline-united-arab-emirates--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-united-arab-emirates--flags--22x22.PNG'
              },
              {
                alt: '[streamline-united-kingdom--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-united-kingdom--flags--22x22.PNG'
              },
              {
                alt: '[streamline-united-states--flags--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-united-states--flags--22x22.PNG'
              }
            ]
          },
          {
            // tab 的标题
            title: '动物',
            // type -> 'emoji' / 'image'
            type: 'image',
            // content -> 数组
            content: [
              {
                alt: '[streamline-2--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-2--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-ant--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-ant--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-baby-chick--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-baby-chick--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-bear-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-bear-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-bird-1--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-bird-1--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-bird-2--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-bird-2--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-blowfish--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-blowfish--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-boar-1--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-boar-1--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-boar-2--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-boar-2--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-bug--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-bug--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-camel--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-camel--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-cat--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-cat--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-cat-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-cat-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-chicken--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-chicken--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-chipmunk--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-chipmunk--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-cow--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-cow--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-cow-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-cow-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-crocodile--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-crocodile--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-dog--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-dog--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-dog-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-dog-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-dolphin--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-dolphin--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-elephant--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-elephant--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-ewe-1--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-ewe-1--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-ewe-2--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-ewe-2--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-fox-face-1--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-fox-face-1--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-fox-face-2--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-fox-face-2--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-frog-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-frog-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-goat--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-goat--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-grinning-face--smiley-people--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-grinning-face--smiley-people--22x22.PNG'
              },
              {
                alt: '[streamline-hamster-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-hamster-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-hatching-chick-1--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-hatching-chick-1--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-hear-no-evil-monkey--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-hear-no-evil-monkey--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-honeybee--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-honeybee--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-horse--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-horse--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-horse-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-horse-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-koala--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-koala--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-lady-beetle--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-lady-beetle--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-lion-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-lion-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-monkey--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-monkey--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-monkey-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-monkey-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-mouse--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-mouse--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-mouse-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-mouse-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-octopus--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-octopus--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-ox--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-ox--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-panda-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-panda-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-penguin-1--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-penguin-1--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-penguin-2--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-penguin-2--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-pig--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-pig--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-pig-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-pig-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-pig-nose--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-pig-nose--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-poodle--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-poodle--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-rabbit--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-rabbit--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-rabbit-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-rabbit-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-ram--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-ram--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-rooster--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-rooster--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-see-no-evil-monkey--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-see-no-evil-monkey--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-snail--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-snail--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-snake--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-snake--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-speak-no-evil-monkey--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-speak-no-evil-monkey--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-spiral-shell--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-spiral-shell--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-spouting-whale--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-spouting-whale--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-tiger--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-tiger--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-tiger-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-tiger-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-tropical-fish--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-tropical-fish--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-turtle--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-turtle--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-unicorn-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-unicorn-face--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-water-buffalo--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-water-buffalo--animals-nature--22x22.PNG'
              },
              {
                alt: '[streamline-wolf-face--animals-nature--22x22.PNG]',
                src: 'static/image/expressionImg/streamline-wolf-face--animals-nature--22x22.PNG'
              }
            ]
          }
        ];
        editor.create();

        this.webSocketInit();
      },
      watch: {
        'chatName': {
          // 数据发生变化就会调用这个函数
          handler() {
            if(this.chatName===''){
              this.chatName = '隔壁老王';
            }
          },
          immediate: true
        }
      },
      updated() {
          let ele = document.getElementById('chatList');
          ele.scrollTop = ele.scrollHeight;
      }
    }
</script>

<style scoped>
  .root{
    min-height: 500px;
    border-radius: 15px;
    margin-left: 180px;
    box-shadow: 0 0 10px #878787;
    margin-right: 55px;
  }
  .top{
    overflow: auto;
    background: #cecece;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }
  .changeHeadPhoto{
    margin-left: 20px;
    width: 50px;
    overflow: auto;
    float: left;
    padding: 10px 20px;
  }
  .changeHeadPhoto img {
    float: left;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    object-fit: cover;
    animation-name: brief-img;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }
  @keyframes brief-img {
    img
    {transform: rotate(0deg);}
    to
    {transform: rotate(360deg);}
  }
  .changeName{
    margin-top: 12px;
    float: left;
  }
  .changeName label{
    color: #797979;
    font-size: 12px;
  }
  .changeName input{
    border: 1px solid #DADADA;
    border-radius: 5px;
    color: #888;
    height: 25px;
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 0 3px 0 5px;
    width: 150px;
    line-height:15px;
    box-shadow: inset 0 1px 4px #ECECEC;
    -moz-box-shadow: inset 0 1px 4px #ECECEC;
    -webkit-box-shadow: inset 0 1px 4px #ECECEC;
  }
  .chatList{
    overflow: hidden;
    min-height: 250px;
    overflow-y: auto;
    border-bottom: rgba(205, 209, 206, 0.66) 1px solid;
  }
  .chatList ul{
    list-style: none;
  }
  .chatList ul li{
    clear: both;
    overflow: auto;
    padding-right: 30px;
    padding-bottom: 5px;
    margin-bottom: 20px;
  }
  .chatHeadPhoto{
    float: left;
    vertical-align: top;
  }
  .chatMsg{
    float: left;
    margin-left: 10px;
    font-size: 12px;
  }
  .chatName{
    margin-top: 0;
    margin-bottom: 3px;
  }
  .chatContent{
    background: #d6d6d6;
    padding: 0 5px;
    max-width: 550px;
    border-radius: 5px;
    box-shadow: 0 0 2px #575757;
    display:inline-block;
    *display:inline;
    *zoom:1;
  }
  .unread{
    height: 0;
    position: relative;
    left: 80%;
    bottom: 15%;
  }
  .unreadHide{
    display: none;
  }
  .el-badge{
    display: inline;
  }
  .unread button{
    display:block;
    width:120px;
    height:40px;
    background-color:#333333;
    color:#FFFFFF;
    text-align:center;
    font-size:18px;
    line-height:40px;
    border-radius: 25px;
    border:none;
    box-shadow:none;
    text-decoration: none;
    transition: box-shadow 0.5s;
    -webkit-transition: box-shadow 0.5s;
  }
  .chatEditor{
    margin-top: -40px;
    height: 180px;
    overflow: hidden;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  .chatSend{
    font-weight: bold;
    z-index: 120;
    position: relative;
    background: #35ad17cc;
    width: 100px;
    height: 30px;
    left: 85%;
    bottom: 100px;
    border-radius: 5px;
    border: #8e8e8e 1px solid;
  }
  .chatSend:active{
    background: rgba(43, 139, 18, 0.8);
  }
</style>

<style>
  .eleImg{
    vertical-align: middle;
  }
  .chatContent p:first-child{
    margin-top: 5px;
    margin-bottom: 5px;
  }
</style>


